import React, { useState, useEffect } from 'react'
// useEffect调用除了函数的返回值外还会对调用函数产生附加影响
export default function Hook5() {
    const [age, setAge] = useState(18);
    const [money, setMoney] = useState(10000);
    // 每一次不论是第一次渲染还是重新渲染都会触发执行useEffect
    useEffect(() => {
        console.log("被执行")
    }, [])
    // useEffect方法在箭头函数之后还有一个数组参数(依赖项)
    // 只有当数组内存有的state发生改变才会触发useEffect方法
    // 如果是空数组,则第一次渲染才执行
    return (
        <div>
            <h2>{age}</h2>
            <h2>{money}</h2>
            <button onClick={e => { setAge(age + 1) }}>加一岁</button>
            <button onClick={e => { setMoney(money + 10000) }}>加一万</button>
        </div>
    )
}
